<template>
    <section  v-loading="firstLoading">
        <el-table
            stripe
            border
            :data="dataList"
            v-loading="loading"
            v-if="dataList.length"
        >

            <el-table-column prop="sparepart.serialNumber" :label="$t('common.label.serialNumber')" show-overflow-tooltip>
            </el-table-column>

            <el-table-column prop="sparepart.name" :label="$t('common.label.name')"  show-overflow-tooltip/>

            <el-table-column prop="sparepart.type" :label="$t('common.label.sparepartType')" show-overflow-tooltip />

            <el-table-column prop="sparepart.standard" :label="$t('common.label.sparepartStandard')" show-overflow-tooltip />

            <el-table-column prop="sparepart.unit" :label="$t('common.label.unit')" show-overflow-tooltip />

            <el-table-column prop="auxilliaryRepertoryCount" :label="$t('common.label.count')" show-overflow-tooltip />

            <el-table-column prop="sparepart.productTypeList" :label="$t('common.label.ralationProductType')" show-overflow-tooltip :formatter="formatterProductTypeList" />

            <el-table-column prop="auxilliaryUnavailableNum" :label="$t('common.label.disabledCount')" show-overflow-tooltip />

            <el-table-column prop="sparepart.description" :label="$t('common.label.explain')" show-overflow-tooltip />

        </el-table>

        <NoAuth v-if="!firstLoading && !dataList.length"/>

        <Pagination 
            v-model="page"
            @handleSizeChange="initData"
            @handleCurrentChange="initData">
        </Pagination>
    </section>
</template>

<script>
// 翻页组件
import Pagination from '../Pagination.vue'

// 暂无数据组件
import NoAuth from '../NoAuth.vue'

import * as HomeApi from "@src/api/HomeApi";

export default {
    // 个人备件库
    name:'tabPaneSpareParts',

    data(){
        return {
            loading:false,


            // 用于解决第一次进入直接展示暂无数据再展示数据的bug
            firstLoading:true,

            page:{
                total:0,
                pageSize:10,
                pageNum:1
            },
            dataList:[]
        }
    },

    props:{
        user:{
            type:Object,
            required:true
        },
        userId:[String,Number]
    },

    components:{
        Pagination,
        NoAuth
    },

    mounted(){
        this.initData()
    },

    methods:{
        initData() {
            const { pageSize, pageNum } = this.page;

            const params = {
                pageSize,
                pageNum,
                userId:this.userId
            }

            this.loading = true;
            HomeApi.getPartList(params).then((res) => {
                const { data:{ list = [],total = 0 }, status } = res;
                this.dataList = list || [];
                this.page.total = total;

                this.loading = false;
                this.firstLoading = false
            }).catch(e=>{
                this.loading = false;
                this.firstLoading = false
            })
        },

        formatterProductTypeList({productTypeList=[]}){
            // const {productTypeList = ''} = sparepart

            if(typeof productTypeList === 'string') return productTypeList;

            let product = [];
            if(Array.isArray(productTypeList)){
                productTypeList.map(item =>{
                    product.push(item.catalogName)
                })
            }

            return product.join(',')
        }
    }
}
</script>

<style lang="scss" scoped>
.el-table{
    border-top:1px solid #E8E8E8;
    border-left:1px solid #E8E8E8;
}
</style>

